<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜜雪冰城官网</title>
    ﻿<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="format-detection" content="telephone=no">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="alternate icon" type="image/png" href="images/favicon.png">
<link rel='icon' href='favicon.ico' type='image/x-ico' />
	<link rel="stylesheet" href="layui/css/layui.css" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="css/default.min.css?t=227" />
<!--[if (gte IE 9)|!(IE)]><!-->
<script type="text/javascript" src="lib/jquery/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="lib/amazeui/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script type="text/javascript" src="lib/handlebars/handlebars.min.js"></script>
<script type="text/javascript" src="lib/iscroll/iscroll-probe.js"></script>
<script type="text/javascript" src="lib/amazeui/amazeui.min.js"></script>
<script type="text/javascript" src="lib/raty/jquery.raty.js"></script>
<script type="text/javascript" src="js/main.min.js?t=1"></script>
</head>
<body>
  <jsp:include page="/milkyTeaServlet"></jsp:include>
<div>
    <header class="header-article-list">
        <h1>在线留言</h1>

    </header>
<div>
<!--  <form class="layui-form"  method="post" >

       <label>姓名
           <input type="text" name="username">
           <span>*</span>
       </label>


       <label>电话
           <input type="text" name="tel">
           <span>*</span>
       </label>


       <label>邮箱
           <input type="email" name="email">
           <span>*</span>
       </label>


       <label>内容
           <textarea></textarea>
           <span>*</span>
       </label>
       <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
   </form>  -->
   <div style="text-align: center;">
    <form class="layui-form layui-inline" action="" >
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red;">*</span> 姓名</label>
				<div class="layui-input-inline">
					<input type="text" name="username" required lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input"  >
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red;">*</span> 电话</label>
				<div class="layui-input-inline">
					<input type="text" name="tel" required lay-verify="required" placeholder="请输入电话" autocomplete="off" class="layui-input">
				</div>
			</div>
			 
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red;">*</span> 邮箱</label>
				<div class="layui-input-inline">
					<input type="text" name="email" required lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red;">*</span>内容</label>
				<div class="layui-input-inline">
					
					   <textarea  name="content"   placeholder="请输入内容"   class="layui-textarea" style="width: 600px;"></textarea>
					
				</div>
			</div>
		
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
		
		 </div>
</div>
</div> 
<script type="text/javascript" src="layui/layui.js" ></script>
		<script>
			//加载了layui的form模块
			layui.use('form', function() {
				var form = layui.form;
				var $ = layui.jquery; //引入jquery
				//监听提交
				form.on('submit(formDemo)', function(data) {
					var d = data.field; //表单中的数据，定义一个对象来接收
					//通过ajax向数据库提交数据了
					d.method="service";
					console.log(d); //提交之前的一个数据验证、通过打印的方式先手动的去判断一下这个数据
					var url ='MessageServlet';
					//确保数据没有问题就进行ajax提交了
					$.post(url, d, function(data) {
							
								console.log('留言成功');
								var index=parent.layer.getFrameIndex(window.name); //获取当前窗口的name
             					 parent.layer.close(index);		//关闭窗口
							
						}, "json");
					return false;
				});
			});
		</script>
<jsp:include page="/footerServlet"></jsp:include>
</body>

</html>